<template>
  <div class="rightBodyContent">
    <div class="rightBodyContent-in">
      <div class="toplineBox-left mb-10">
        <downexcel type="scheduling" :option="{}" :excelName="excelNameFn()"></downexcel>
        <el-upload
          :action="$uploadImg"
          :on-success="handleSuccess"
          :on-progress="handleProgress"
          :show-file-list="false"
          accept=".xls,.xlsx"
          class="el-upload-body ml-10">
          <el-button type="primary" size="small" plain>导入排班模版</el-button>
        </el-upload>
        <el-button size="small" plain @click="InitFn" class="ml-10">刷新</el-button>
      </div>
      <div class="time-body">
        <div v-for="(item, index) in typeTime" :key="index" class="time-list" @click="timeEditFn(item)">
          {{ item.name }}:{{ `${item.moring_start}~${item.moring_end}` }}/{{ `${item.afternoon_start}~${item.afternoon_end}` }}
        </div>
      </div>
      <div class="">
        <table width="100%" border="1">
          <tr>
            <td class="td-week"></td>
            <td>周一</td>
            <td>周二</td>
            <td>周三</td>
            <td>周四</td>
            <td>周五</td>
          </tr>
          <template v-if="scheduling_list_length">
            <tr v-for="(item, index) in scheduling_list" :key="index">
              <td class="td-week">{{ typeTime[index].name }}</td>
              <td v-for="week in 5" :key="`week${week}`">
                <em v-for="user in  item[week]" :key="`user${user.id}`" class="userList-line">
                  【{{ `${user.realname}${user.classes ? ('(' + user.classes.class_name + ')') : ''}` }}】
                </em>
              </td>
            </tr>
          </template>
          <template v-else>
            <tr class="text-table">
              <td colspan="6">未找到相关内容{{ scheduling_list_length }}</td>
            </tr>
          </template>
        </table>
      </div>
    </div>
    <editTime @initHome="typeTimeFn" :visible.sync="timeWeekState" :timeOption="timeOption"></editTime>
  </div>
</template>

<script>
import {scheduling_user_import, scheduling_user_index, scheduling_index} from '@/api/admin/staffService'
import editTime from "./editTime";

export default {
  components: {editTime},
  data() {
    return {
      progressPercent: 0,
      typeTime: {},
      scheduling_list: {},
      scheduling_list_length: 0,
      timeWeekState: false,
      timeOption: null
    }
  },
  created() {
    this.InitFn()
    this.typeTimeFn()
  },
  methods: {
    InitFn() {
      scheduling_user_index().then(res => {
        let list_ = {} // key 类型
        for (let item of res.list) {
          if (!list_[item.scheduling_id]) {
            list_[item.scheduling_id] = {}
          }
          list_[item.scheduling_id][item.week] = item.user_ids
        }
        let arr = Object.keys(list_);
        this.scheduling_list_length = arr.length;
        this.scheduling_list = JSON.parse(JSON.stringify(list_))
      })
    },
    typeTimeFn() {
      scheduling_index().then(res => {
        let a_ = {}
        for (let item of res.list) {
          a_[item.id] = item
        }
        this.typeTime = JSON.parse(JSON.stringify(a_))
      })
    },
    handleProgress() {
      this.progressPercent = parseInt(event.percent)
    },
    handleSuccess(response) {
      this.materielImport(response.data.name)
    },
    // 导入物料
    materielImport(path) {
      scheduling_user_import({file: path}).then(res => {
        console.log('res:', res)
        this.InitFn()
      })
    },
    excelNameFn() {

    },
    timeEditFn(item) {
      this.timeOption = JSON.parse(JSON.stringify(item))
      this.timeWeekState = true
    }
  },
  mounted() {
  }
}
</script>
<style>
table {
  border-collapse: collapse;
}

table th {
  height: 50px;
}

table td {
  padding: 5px;
  text-align: center;
  font-size: 12px;
}

.userList-line {
  cursor: pointer;
  font-style: normal;
}

.userList-line:hover {
  text-decoration: underline;
  color: #006dcd;
}

.time-body {

}

.time-list {
  float: left;
  color: #0046b7;
  margin-bottom: 5px;
  margin-right: 10px;
  background: #ffe9be;
  padding: 2px 5px;
  border-radius: 3px;
  cursor: pointer;
}

.time-list:hover {
  text-decoration: underline;
}

.td-week {
  width: 100px;
  text-align: center;
}

.text-table {
  text-align: center;
}
</style>
